<!-- canvas -->
<template>
  <div class="container">
    <test-slot :render="compontOption" componentName="photo" v-if="!show"></test-slot>
    <test-slot :render="compontOption" componentName="canvas" v-else></test-slot>
  </div>
</template>

<script>
import TestSlot from './test4-slot'
import Photo from './photo.vue'
import Canvas from './canvas.vue'
export default {
  name: 'test4',
  components: {
    TestSlot,
    Photo,
    Canvas,
  },
  data() {
    return {
      show: false,
      imageData: '',
    }
  },
  methods: {
    compontOption(h, cName) {
      const that = this
      if (cName === 'photo') {
        return h(Photo, {
          props: {
            imageData: that.imageData,
          },
          on: {
            click() {
              that.show = true
            },
          },
        })
      } else if (cName === 'canvas') {
        return h(Canvas, {
          on: {
            save(imageData) {
              that.show = false
              that.imageData = imageData
            },
          },
        })
      }
    },
  },
}
</script>
<style  scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
</style>